<script setup lang="ts">
import { computed, defineAsyncComponent } from "vue";
interface Props {
  modelValue?: string;
  mode: API.Form.Mode;
  controlItem: API.Form.ControlItem;
}
const props = defineProps<Props>();
const emit = defineEmits(["update:modelValue"]);
const onChange = (value: any) => emit("update:modelValue", value);
const controlItem = computed(() => {
  return { ...props.controlItem };
});
const {
  controlName,
  controlId,
  controlAttr: { required },
  controlAttr,
} = controlItem.value;

const rules = required ? [{ required: true, message: "请填写用户名" }] : [];

const isEdit = computed(() => props.mode === "edit");
const Comp = defineAsyncComponent(
  () => import(`./components/${controlItem.value.controlPath}/index.vue`)
);
</script>

<template>
  <van-field
    :class="{ isDetail: !isEdit }"
    :required="isEdit ? required : false"
    :label="controlName"
    :name="controlId"
    :rules="rules"
    :model-value="modelValue"
  >
    <template #input>
      <Comp
        :model-value="modelValue"
        :mode="mode"
        :control-attr="controlAttr"
        @update:model-value="onChange"
      />
    </template>
  </van-field>
</template>

<style scoped lang="scss">
.isDetail {
  &:after {
    display: none !important;
  }
}
</style>
